<template>
  <div class="userManagement-container">
    <el-tabs
      v-model="activeName"
      type="card"
      class="report-content"
      @tab-click="handleClick"
    >
      <el-tab-pane label="结算单" name="first">
        <el-card
          class="box-card box-card-outer"
          :body-style="{ 'border-top': '0px' }"
        >
          <vab-query-form>
            <vab-query-form-left-panel :span="24">
              <div class="view flex-row align-center">
                <div class="fz-12 bold c_333 m-r-15">名称：123123</div>

                <div class="view flex-row align-center m-r-15">
                  <div class="fz-12 bold m-r-15">结算方式:</div>
                  <el-select placeholder="请选择" size="mini">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                      <span style="float: left">{{ item.label }}</span>
                      <span
                        style="float: right; color: #8492a6; font-size: 13px"
                      >
                        {{ item.value }}
                      </span>
                    </el-option>
                  </el-select>
                </div>

                <div class="view flex-row align-center">
                  <div class="fz-12 bold m-r-15">结算周期:</div>

                  <el-date-picker
                    type="datetimerange"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right"
                  ></el-date-picker>
                </div>
              </div>
            </vab-query-form-left-panel>
          </vab-query-form>

          <el-card class="box-card" :body-style="{ padding: '0px' }">
            <div slot="header" class="clearfix">
              <span>资金信息</span>
            </div>

            <el-table :data="tableData1" style="width: 100%">
              <el-table-column
                prop="col1"
                align="center"
                label=""
                width="180"
              ></el-table-column>
              <el-table-column prop="name" label="基币"></el-table-column>
              <el-table-column prop="address" label="美元"></el-table-column>

              <el-table-column prop="address" label="港元"></el-table-column>

              <el-table-column prop="address" label="日元"></el-table-column>

              <el-table-column prop="address" label="英镑"></el-table-column>

              <el-table-column prop="address" label="欧元"></el-table-column>

              <el-table-column prop="address" label="人民币"></el-table-column>
            </el-table>
          </el-card>

          <el-card class="box-card" :body-style="{ padding: '0px' }">
            <div slot="header" class="clearfix">
              <span>成交明细</span>
            </div>

            <el-table :data="tableData2" style="width: 100%">
              <el-table-column
                prop="col1"
                align="center"
                label="成交编号"
                width="180"
              ></el-table-column>

              <el-table-column label="交易所"></el-table-column>

              <el-table-column prop="address" label="品种"></el-table-column>

              <el-table-column prop="address" label="合约"></el-table-column>

              <el-table-column prop="address" label="买卖"></el-table-column>

              <el-table-column prop="address" label="开平"></el-table-column>

              <el-table-column prop="address" label="成交价"></el-table-column>

              <el-table-column prop="address" label="手数"></el-table-column>

              <el-table-column prop="address" label="手续费"></el-table-column>

              <el-table-column
                prop="address"
                label="成交时间"
              ></el-table-column>
            </el-table>
          </el-card>

          <el-card class="box-card" :body-style="{ padding: '0px' }">
            <div slot="header" class="clearfix">
              <span>平仓明细</span>
            </div>

            <el-table :data="tableData" style="width: 100%">
              <el-table-column
                prop="date"
                label="交易账号"
                width="120"
              ></el-table-column>
              <el-table-column prop="name" label="交易所"></el-table-column>
              <el-table-column prop="address" label="品种"></el-table-column>
              <el-table-column prop="address" label="合约"></el-table-column>
              <el-table-column prop="address" label="买卖"></el-table-column>
              <el-table-column prop="address" label="币种"></el-table-column>
              <el-table-column prop="address" label="昨结"></el-table-column>
              <el-table-column prop="address" label="开仓价"></el-table-column>
              <el-table-column prop="address" label="手数"></el-table-column>
              <el-table-column prop="address" label="成交价"></el-table-column>
              <el-table-column
                prop="address"
                label="平仓盈亏"
              ></el-table-column>
              <el-table-column
                prop="address"
                label="平仓时间"
              ></el-table-column>
            </el-table>
          </el-card>

          <el-card class="box-card" :body-style="{ padding: '0px' }">
            <div slot="header" class="clearfix">
              <span>持仓明细</span>
            </div>

            <el-table :data="tableData" style="width: 100%">
              <el-table-column
                prop="date"
                label="持仓编号"
                width="100"
              ></el-table-column>
              <el-table-column
                prop="name"
                label="交易所"
                width="100"
              ></el-table-column>
              <el-table-column prop="address" label="地址"></el-table-column>

              <el-table-column
                prop="date"
                label="品种"
                width="100"
              ></el-table-column>
              <el-table-column
                prop="name"
                label="合约"
                width="100"
              ></el-table-column>
              <el-table-column prop="address" label="地址"></el-table-column>

              <el-table-column
                prop="date"
                label="币种"
                width="100"
              ></el-table-column>
              <el-table-column
                prop="name"
                label="买卖"
                width="100"
              ></el-table-column>
              <el-table-column prop="address" label="地址"></el-table-column>

              <el-table-column
                prop="date"
                label="开平"
                width="100"
              ></el-table-column>
              <el-table-column
                prop="name"
                label="昨结价"
                width="100"
              ></el-table-column>
              <el-table-column prop="address" label="开仓价"></el-table-column>

              <el-table-column prop="address" label="持仓价"></el-table-column>

              <el-table-column prop="address" label="结算价"></el-table-column>

              <el-table-column
                prop="address"
                label="持仓盈亏"
              ></el-table-column>

              <el-table-column
                prop="address"
                label="创建时间"
              ></el-table-column>
            </el-table>
          </el-card>

          <el-card class="box-card" :body-style="{ padding: '0px' }">
            <div slot="header" class="clearfix">
              <span>持仓汇总</span>
            </div>

            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="date" label="持仓编号"></el-table-column>
              <el-table-column prop="name" label="交易所"></el-table-column>
              <el-table-column prop="address" label="地址"></el-table-column>

              <el-table-column prop="date" label="品种"></el-table-column>
              <el-table-column prop="name" label="合约"></el-table-column>
              <el-table-column prop="address" label="地址"></el-table-column>

              <el-table-column prop="date" label="币种"></el-table-column>
              <el-table-column prop="name" label="买卖"></el-table-column>
              <el-table-column prop="address" label="地址"></el-table-column>

              <el-table-column prop="date" label="开平"></el-table-column>
              <el-table-column prop="name" label="昨结价"></el-table-column>
              <el-table-column prop="address" label="开仓价"></el-table-column>

              <el-table-column prop="address" label="持仓价"></el-table-column>

              <el-table-column prop="address" label="结算价"></el-table-column>

              <el-table-column
                prop="address"
                label="持仓盈亏"
              ></el-table-column>

              <el-table-column
                prop="address"
                label="创建时间"
              ></el-table-column>
            </el-table>
          </el-card>
        </el-card>
      </el-tab-pane>

      <el-tab-pane label="持仓记录" name="second">
        <el-card
          class="box-card box-card-no-padding"
          :body-style="{ 'border-top': '0px' }"
        >
          <el-table
            v-loading="listLoading"
            :data="list"
            :element-loading-text="elementLoadingText"
            @selection-change="setSelectRows"
          >
            <el-table-column prop="id" label="订单号"></el-table-column>

            <el-table-column
              show-overflow-tooltip
              prop="id"
              label="交易所"
            ></el-table-column>

            <el-table-column
              show-overflow-tooltip
              prop="username"
              label="品种"
            ></el-table-column>

            <el-table-column
              show-overflow-tooltip
              prop="email"
              label="合约"
            ></el-table-column>

            <el-table-column
              show-overflow-tooltip
              prop="email"
              label="买卖"
            ></el-table-column>

            <el-table-column
              show-overflow-tooltip
              prop="email"
              label="持仓价"
            ></el-table-column>

            <el-table-column
              show-overflow-tooltip
              prop="email"
              label="持仓量"
            ></el-table-column>

            <el-table-column
              show-overflow-tooltip
              prop="email"
              label="平台"
            ></el-table-column>

            <el-table-column
              show-overflow-tooltip
              prop="email"
              label="平台订单号"
            ></el-table-column>

            <el-table-column
              show-overflow-tooltip
              prop="email"
              label="时间"
            ></el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>

      <el-tab-pane label="成交记录" name="third">
        <el-table
          v-loading="listLoading"
          :data="list"
          :element-loading-text="elementLoadingText"
          @selection-change="setSelectRows"
        >
          <el-table-column
            show-overflow-tooltip
            type="selection"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="id"
            label="id"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="username"
            label="用户名"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="email"
            label="邮箱"
          ></el-table-column>

          <el-table-column show-overflow-tooltip label="权限">
            <template #default="{ row }">
              <el-tag v-for="(item, index) in row.permissions" :key="index">
                {{ item }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column
            show-overflow-tooltip
            prop="datatime"
            label="修改时间"
          ></el-table-column>
          <el-table-column show-overflow-tooltip label="操作" width="200">
            <template #default="{ row }">
              <el-button type="text" @click="handleEdit(row)">编辑</el-button>
              <el-button type="text" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="委托记录" name="fourth">
        <el-table
          v-loading="listLoading"
          :data="list"
          :element-loading-text="elementLoadingText"
          @selection-change="setSelectRows"
        >
          <el-table-column
            show-overflow-tooltip
            type="selection"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="id"
            label="id"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="username"
            label="用户名"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="email"
            label="邮箱"
          ></el-table-column>

          <el-table-column show-overflow-tooltip label="权限">
            <template #default="{ row }">
              <el-tag v-for="(item, index) in row.permissions" :key="index">
                {{ item }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column
            show-overflow-tooltip
            prop="datatime"
            label="修改时间"
          ></el-table-column>
          <el-table-column show-overflow-tooltip label="操作" width="200">
            <template #default="{ row }">
              <el-button type="text" @click="handleEdit(row)">编辑</el-button>
              <el-button type="text" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="出入金记录" name="fourth">
        <el-table
          v-loading="listLoading"
          :data="list"
          :element-loading-text="elementLoadingText"
          @selection-change="setSelectRows"
        >
          <el-table-column
            show-overflow-tooltip
            type="selection"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="id"
            label="id"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="username"
            label="用户名"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="email"
            label="邮箱"
          ></el-table-column>

          <el-table-column show-overflow-tooltip label="权限">
            <template #default="{ row }">
              <el-tag v-for="(item, index) in row.permissions" :key="index">
                {{ item }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column
            show-overflow-tooltip
            prop="datatime"
            label="修改时间"
          ></el-table-column>
          <el-table-column show-overflow-tooltip label="操作" width="200">
            <template #default="{ row }">
              <el-button type="text" @click="handleEdit(row)">编辑</el-button>
              <el-button type="text" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="子账户资金" name="fourth">
        <el-table
          v-loading="listLoading"
          :data="list"
          :element-loading-text="elementLoadingText"
          @selection-change="setSelectRows"
        >
          <el-table-column
            show-overflow-tooltip
            type="selection"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="id"
            label="id"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="username"
            label="用户名"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="email"
            label="邮箱"
          ></el-table-column>

          <el-table-column show-overflow-tooltip label="权限">
            <template #default="{ row }">
              <el-tag v-for="(item, index) in row.permissions" :key="index">
                {{ item }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column
            show-overflow-tooltip
            prop="datatime"
            label="修改时间"
          ></el-table-column>
          <el-table-column show-overflow-tooltip label="操作" width="200">
            <template #default="{ row }">
              <el-button type="text" @click="handleEdit(row)">编辑</el-button>
              <el-button type="text" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <el-pagination
      background
      :current-page="queryForm.pageNo"
      :page-size="queryForm.pageSize"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
    <edit ref="edit" @fetch-data="fetchData"></edit>
  </div>
</template>

<script>
  import { getList, doDelete } from '@/api/userManagement'
  import Edit from './components/UserManagementEdit'

  export default {
    name: 'ReportManagement',
    components: { Edit },
    data() {
      return {
        activeName: 'first',
        list: null,
        value1: '',
        pickerOptions: {
          shortcuts: [
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', [start, end])
              },
            },
            {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', [start, end])
              },
            },
            {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                picker.$emit('pick', [start, end])
              },
            },
          ],
        },
        cities: [
          {
            value: 'Beijing',
            label: '北京',
          },
          {
            value: 'Shanghai',
            label: '上海',
          },
          {
            value: 'Nanjing',
            label: '南京',
          },
          {
            value: 'Chengdu',
            label: '成都',
          },
          {
            value: 'Shenzhen',
            label: '深圳',
          },
          {
            value: 'Guangzhou',
            label: '广州',
          },
        ],
        options: [
          {
            value: 1,
            label: '逐笔',
          },
          {
            value: 2,
            label: '盯市',
          },
        ],

        tableData1: [
          {
            col1: '期初结存',
            name: '王小虎',
            address: '',
          },
          {
            col1: '期末结存',
            name: '王小虎',
            address: '',
          },
          {
            col1: '客户权益',
            name: '王小虎',
            address: '',
          },
          {
            col1: '可用资金',
            name: '王小虎',
            address: '',
          },
          {
            col1: '可用资金',
            name: '王小虎',
            address: '',
          },
          {
            col1: '保证金占用',
            name: '王小虎',
            address: '',
          },
          {
            col1: '出入金',
            name: '王小虎',
            address: '',
          },
          {
            col1: '手续费',
            name: '王小虎',
            address: '',
          },

          {
            col1: '平仓盈亏',
            name: '王小虎',
            address: '',
          },

          {
            col1: '持仓盈亏',
            name: '王小虎',
            address: '',
          },

          {
            col1: '总盈亏',
            name: '王小虎',
            address: '',
          },
        ],

        tableData2: [
          {
            col1: '成交编号',
            name: '王小虎',
            address: '',
          },
          {
            col1: '交易所',
            name: '王小虎',
            address: '',
          },
          {
            col1: '品种',
            name: '王小虎',
            address: '',
          },
          {
            col1: '合约',
            name: '王小虎',
            address: '',
          },
          {
            col1: '买卖',
            name: '王小虎',
            address: '',
          },
          {
            col1: '开平',
            name: '王小虎',
            address: '',
          },
          {
            col1: '成交价',
            name: '王小虎',
            address: '',
          },
          {
            col1: '手数',
            name: '王小虎',
            address: '',
          },

          {
            col1: '手续费',
            name: '王小虎',
            address: '',
          },

          {
            col1: '成交时间',
            name: '王小虎',
            address: '',
          },
        ],

        tableData: [
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
          },
        ],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        elementLoadingText: '正在加载...',
        queryForm: {
          pageNo: 1,
          pageSize: 10,
          username: '',
        },
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      setSelectRows(val) {
        this.selectRows = val
      },
      handleEdit(row) {
        if (row.id) {
          this.$refs['edit'].showEdit(row)
        } else {
          this.$refs['edit'].showEdit()
        }
      },
      handleDelete(row) {
        if (row.id) {
          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
            const { msg } = await doDelete({ ids: row.id })
            this.$baseMessage(msg, 'success')
            this.fetchData()
          })
        } else {
          if (this.selectRows.length > 0) {
            const ids = this.selectRows.map((item) => item.id).join()
            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
              const { msg } = await doDelete({ ids })
              this.$baseMessage(msg, 'success')
              this.fetchData()
            })
          } else {
            this.$baseMessage('未选中任何行', 'error')
            return false
          }
        }
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData()
      },
      queryData() {
        this.queryForm.pageNo = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        const { data, totalCount } = await getList(this.queryForm)
        this.list = data
        this.total = totalCount
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      },
    },
  }
</script>
<style lang="scss" scoped>
  ::v-deep .report-content {
    .el-tabs__header {
      margin-bottom: 0 !important;
    }
  }
  ::v-deep .box-card-outer {
    border-top: 0 !important;
    .el-card {
      border-top: 0 !important;
    }
  }
  ::v-deep .box-card-no-padding {
    .el-card__body {
      padding-left: 0;
      padding-right: 0;
    }
  }
</style>
